<template>
  <div class="rental-detail">
    <div class="detail-header">
      <h2>{{ house.title }}</h2>
      <div class="credit-info" v-if="userCreditScore">
        <span>当前信用分：{{ userCreditScore }}</span>
        <el-tag :type="getCreditTagType(userCreditScore)">
          {{ getCreditLevel(userCreditScore) }}
        </el-tag>
      </div>
    </div>

    <div class="detail-content">
      <!-- 房源图片 -->
      <div class="house-images">
        <el-carousel height="400px">
          <el-carousel-item v-for="(image, index) in houseImages" :key="index">
            <el-image :src="image" fit="cover" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 房源信息 -->
      <div class="house-info">
        <div class="info-section">
          <h3>基本信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">月租金</span>
              <span class="value price">¥{{ house.currentPrice }}</span>
              <span class="original-price" v-if="house.originalPrice">
                原价：¥{{ house.originalPrice }}
              </span>
            </div>
            <div class="info-item">
              <span class="label">房型</span>
              <span class="value">{{ house.houseType }}</span>
            </div>
            <div class="info-item">
              <span class="label">出租类型</span>
              <span class="value">{{ house.rentalType }}</span>
            </div>
            <div class="info-item">
              <span class="label">面积</span>
              <span class="value">{{ house.area }}㎡</span>
            </div>
            <div class="info-item">
              <span class="label">楼层</span>
              <span class="value">{{ house.floor }}层</span>
            </div>
            <div class="info-item">
              <span class="label">朝向</span>
              <span class="value">{{ house.orientation }}</span>
            </div>
          </div>
        </div>

        <div class="info-section">
          <h3>房源设施</h3>
          <div class="facilities">
            <el-tag v-if="house.hasElevator" type="success">电梯</el-tag>
            <el-tag v-if="house.hasFurniture" type="success">家具</el-tag>
            <el-tag type="info">空调</el-tag>
            <el-tag type="info">热水器</el-tag>
            <el-tag type="info">洗衣机</el-tag>
            <el-tag type="info">冰箱</el-tag>
            <el-tag type="info">电视</el-tag>
            <el-tag type="info">宽带</el-tag>
          </div>
        </div>

        <div class="info-section">
          <h3>房源描述</h3>
          <p class="description">{{ house.description }}</p>
        </div>

        <div class="info-section">
          <h3>位置信息</h3>
          <p class="address">{{ house.address }}</p>
          <div class="map-container">
            <!-- 这里可以集成地图组件 -->
          </div>
        </div>
      </div>

      <!-- 信用优惠信息 -->
      <div class="credit-benefits" v-if="userCreditScore">
        <h3>信用优惠</h3>
        <div class="benefits-list">
          <div class="benefit-item" v-if="isDepositFree">
            <el-icon><Check /></el-icon>
            <span>信用分{{ userCreditScore }}分，享受免押金特权</span>
          </div>
          <div class="benefit-item" v-if="hasRentDiscount">
            <el-icon><Check /></el-icon>
            <span>信用分{{ userCreditScore }}分，享受租金{{ rentDiscount }}折优惠</span>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="primary" size="large" @click="handleRent">
          立即租房
        </el-button>
      </div>
    </div>

    <!-- 租房对话框 -->
    <el-dialog
      v-model="rentDialogVisible"
      title="确认租房"
      width="500px"
    >
      <rental-form
        v-if="house"
        :house="house"
        :user-credit-score="userCreditScore"
        @submit="handleSubmitRental"
        @cancel="rentDialogVisible = false"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Check } from '@element-plus/icons-vue'
import RentalForm from '@/components/credit/RentalForm.vue'
import { getHouseById, checkDepositFree } from '@/api/rental'
import { getUserCreditScore } from '@/api/user'

const route = useRoute()
const router = useRouter()

// 数据
const house = ref(null)
const userCreditScore = ref(null)
const rentDialogVisible = ref(false)

// 模拟房源图片数据
const houseImages = ref([
  'https://example.com/house1.jpg',
  'https://example.com/house2.jpg',
  'https://example.com/house3.jpg'
])

// 计算属性
const isDepositFree = computed(() => {
  return userCreditScore.value >= 700
})

const hasRentDiscount = computed(() => {
  return userCreditScore.value >= 600
})

const rentDiscount = computed(() => {
  if (userCreditScore.value >= 700) return 8
  if (userCreditScore.value >= 600) return 9
  return 10
})

// 方法
const loadHouseDetail = async () => {
  try {
    const response = await getHouseById(route.params.id)
    house.value = response.data
  } catch (error) {
    ElMessage.error('获取房源详情失败')
  }
}

const loadUserCreditScore = async () => {
  try {
    const response = await getUserCreditScore()
    userCreditScore.value = response.data
  } catch (error) {
    ElMessage.error('获取信用分失败')
  }
}

const handleRent = () => {
  if (!userCreditScore.value) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  rentDialogVisible.value = true
}

const handleSubmitRental = async (rentalData) => {
  try {
    // 处理租房提交
    rentDialogVisible.value = false
    router.push('/credit/rental/orders')
  } catch (error) {
    ElMessage.error('提交租房申请失败')
  }
}

const getCreditTagType = (score) => {
  if (score >= 700) return 'success'
  if (score >= 600) return 'warning'
  return 'danger'
}

const getCreditLevel = (score) => {
  if (score >= 700) return '优秀'
  if (score >= 600) return '良好'
  return '一般'
}

onMounted(() => {
  loadHouseDetail()
  loadUserCreditScore()
})
</script>

<style lang="scss" scoped>
.rental-detail {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);

  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }

    .credit-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }

  .detail-content {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;

    .house-images {
      margin-bottom: 20px;

      .el-image {
        width: 100%;
        height: 100%;
      }
    }

    .house-info {
      .info-section {
        margin-bottom: 30px;

        h3 {
          margin: 0 0 15px;
          font-size: 18px;
          color: #303133;
          border-bottom: 1px solid #ebeef5;
          padding-bottom: 10px;
        }

        .info-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;

          .info-item {
            .label {
              color: #909399;
              margin-right: 10px;
            }

            .value {
              color: #303133;
              font-weight: 500;

              &.price {
                color: #f56c6c;
                font-size: 20px;
                font-weight: bold;
              }
            }

            .original-price {
              color: #909399;
              text-decoration: line-through;
              margin-left: 10px;
            }
          }
        }

        .facilities {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;

          .el-tag {
            margin-right: 10px;
            margin-bottom: 10px;
          }
        }

        .description {
          color: #606266;
          line-height: 1.6;
        }

        .address {
          color: #606266;
          margin-bottom: 10px;
        }

        .map-container {
          height: 300px;
          background-color: #f5f7fa;
          border-radius: 4px;
        }
      }
    }

    .credit-benefits {
      background-color: #f0f9eb;
      padding: 20px;
      border-radius: 4px;
      margin-bottom: 20px;

      h3 {
        margin: 0 0 15px;
        color: #67c23a;
      }

      .benefits-list {
        .benefit-item {
          display: flex;
          align-items: center;
          gap: 10px;
          color: #67c23a;
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .action-buttons {
      display: flex;
      justify-content: center;
      margin-top: 30px;

      .el-button {
        width: 200px;
      }
    }
  }
}
</style> 